<template>
  <div>
    <div>
      <button type="button" @click="addShopItem">模拟新增商品</button>
      <button type="button" @click="editShopItem">直接修改父组件的shop值</button>
    </div>
    <ShopCar ref="shopCarRef" :shops="shops" v-slot="{ item }">
      <ShopItem2 :item="item"></ShopItem2>
    </ShopCar>
  </div>
</template>
<script setup lang="ts">
import { ref, useTemplateRef } from 'vue'
import ShopCar from './components/ShopCar.vue'

import { type IShopInfo } from '@/types/shop'
import ShopItem2 from './components/ShopItem2.vue'

// 模版引用
const shopCarRef = useTemplateRef('shopCarRef')

const shops = ref<IShopInfo[]>([
  {
    id: '1',
    shopName: 'laoda',
    count: 1,
    price: 100,
    shopPic:
      'https://img2.baidu.com/it/u=978079617,2545821976&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1023',
    stock: 10
  },
  {
    id: '2',
    shopName: '黑中华',
    count: 1,
    price: 50,
    shopPic:
      'https://img2.baidu.com/it/u=709272474,3238933160&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
    stock: 5
  },
  {
    id: '3',
    shopName: '马自达',
    count: 1,
    price: 20000,
    shopPic:
      'https://img1.baa.bitautotech.com/dzusergroupfiles/2024/07/29/80ced18ef6044a46b8f48e4b4721f902.jpg',
    stock: 50
  }
])

const addShopItem = () => {
  // 直接修改父组件的值也是可以的
  // shops.value.push({
  //   id: '4',
  //   shopName: '润田矿泉水',
  //   count: 1,
  //   price: 1,
  //   shopPic:
  //     'https://img1.baa.bitautotech.com/dzusergroupfiles/2024/07/29/80ced18ef6044a46b8f48e4b4721f902.jpg',
  //   stock: 9
  // })

  shopCarRef.value?.addShop({
    id: '4',
    shopName: '润田矿泉水',
    count: 1,
    price: 1,
    shopPic:
      'https://img1.baa.bitautotech.com/dzusergroupfiles/2024/07/29/80ced18ef6044a46b8f48e4b4721f902.jpg',
    stock: 9
  })
}

const editShopItem = () => {
  shopCarRef.value?.editShop(0, 'price', 120)
}
</script>
